<template>
  <div>
    <common-head title="支付"></common-head>
    <div class="wrap">
      <van-contact-card
        :type="type"
        :name="currentOrder.contact.name"
        :tel="currentOrder.contact.tel"
        @click="onEdit"
      />
      <!-- 购买商品 -->
      <div class="items">
        <van-card
          v-for="item in currentOrder.items"
          :key="item.id"
          :num="item.num"
          :price="item.minPrice"
          :title="item.name"
          :thumb="item.pic"
        />
      </div>
      <!-- /购买商品 -->
    </div>
    <van-submit-bar :price="currentOrder.total*100" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { mapState } from 'vuex'
export default {
  methods: {
    onEdit () {
      // 选择联系人中 选择联系人 进入联系人列表
      this.$router.push('/contactList')
    },
    onSubmit () {
      alert('1')
    }
  },
  computed: {
    ...mapState({
      currentOrder: state => state.order.currentOrder
    }),
    type () {
      // 选择联系人装填
      if (this.currentOrder.contact.name) {
        return 'edit'
      } else {
        return 'add'
      }
    }
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  margin-top: 46px;
  margin-bottom: 50px;
}
</style>
